<template>
	<view class="container">
		<view class="header-top">就近加油</view>
		<view class="search-bar-wrapper">
			<view class="search-bar">
				<input type="text" placeholder="输入需要搜索的内容" class="search-input" />
				<img src="/static/whb/搜索@3x.png" alt="搜索图标" class="search-icon" />
			</view>
			<view class="list-mode-btn">列表模式</view>
		</view>
		<view class="map-section">
			<view class="map-wrapper">
				<map scale="15" :markers="mks" :longitude="longitude" :latitude="latitude"
					class="map"></map>
			</view>

			<!-- 底部卡片 -->
			<view class="bottom-info">
				<view class="info-left">
					<text class="station-name">中国石油加油站</text>
					<text class="station-address">山阳区人民路与解放路交叉口</text>
					<view class="store-detail">
						<image src="/static/whb/info.png" class="info-icon" />
						<text class="detail-text">门店详情 >></text>
					</view>
				</view>
				<image src="/static/whb/youhui1.jpg" mode="aspectFill" class="station-img" />
			</view>

			<!-- 导航按钮 -->
			<button class="nav-btn" @click="goToNavigation">立即导航</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'


	const latitude = ref(34.826128)
	const longitude = ref(113.558902)

	const mks = ref([{
			id: 999,
			latitude: 34.826128,
			longitude: 113.558902,
			width: 20,
			height: 20,
			iconPath: '/static/dw.png',
			callout: { // 自定义一直显示的数据，自己的定位信息
				content: "附近门店>",
				color: "#fff",
				bgColor: '#000',
				borderRadius: 10,
				padding: 10,
				display: "ALWAYS",
			}
		}
	])

	// 当页面加载后立马执行
	onLoad(() => {
		getLocation()
	})
	//定义一个函数，选择地理位置
	function chose() {
		// #ifdef H5
		navigator.geolocation.getCurrentPosition(
			position => {
				console.log(position.coords.latitude, position.coords.longitude)
			},
			error => {
				console.log(error);
			}

		)
		// #endif
		// #ifndef H5
		console.log("选择定位");
		uni.chooseLocation({
			success(res) {
				console.log('选择后的位置', res)
			}
		})
		// #endif
	}

	// 导航按钮点击处理函数
	function goToNavigation() {
		uni.navigateTo({
			url: '/pages/whb/05-navigation/05-navigation'
		})
	}
</script>

<style>
	.container {
		height: 200px;
		background: #007aff;
		padding-bottom: 20px;
	}

	.header-top {
		text-align: center;
		color: white;
		padding-top: 10px;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 1px;
	}

	.search-bar-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 15px;
		margin-bottom: 20px;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		flex: 1;
		height: 40px;
		padding: 0 10px;
		border: 1.5px solid #e6e6e6;
	}

	.search-input {
		flex: 1;
		height: 36px;
		border: none;
		outline: none;
		background: transparent;
		font-size: 15px;
	}

	.search-icon {
		width: 22px;
		height: 22px;
		margin-left: 5px;
	}

	.list-mode-btn {
		margin-left: 10px;
		background: #ff9800;
		color: #fff;
		border-radius: 16px;
		padding: 0 16px;
		height: 32px;
		display: flex;
		align-items: center;
		font-size: 15px;
		font-weight: 500;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.map-section {
		margin-top: 20px;
		background: #fff;
		border-radius: 20px 20px 0 0;
		overflow: hidden;
	}

	.map-wrapper {
		width: 100%;
		height: calc(100vh - 180px);
		background: #f5f5f5;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.bottom-info {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 140rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.info-left {
		flex: 1;
		margin-right: 20rpx;
	}

	.station-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.station-address {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-bottom: 10rpx;
	}

	.store-detail {
		display: flex;
		align-items: center;
	}

	.info-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.detail-text {
		font-size: 26rpx;
		color: #999;
	}

	.station-img {
		width: 160rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.nav-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 40rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #007AFF;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 44rpx;
		text-align: center;
		border: none;
	}
</style>